<template>
  <div class="container">
    <div class="app-container">
      <el-tree
        :data="list"
        :props="defaultProps"
        show-checkbox
        :expand-on-click-node="false"
        icon-class="el-icon-office-building"
        default-expand-all
        highlight-current
      >
        <template slot-scope="{data}">
          <el-row style="width: 100%" type="flex" justify="between">
            <el-col>{{ data.name }}</el-col>
            <el-col>{{ data.type }}</el-col>
            <el-col>{{ data.managerName }}</el-col>
            <el-col>{{ data.member || 0 }}人</el-col>
            <el-col>
              <el-button type="text">编辑</el-button>
              <el-button type="text" style="margin: 0 10px">删除</el-button>
              <el-button type="text">新增子项</el-button>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000
})

export default {
  name: 'Zuzhijiagou',
  data() {
    return {
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await instance.get('/department')
      console.log(res.data)
      this.list = res.data
    },

    totree(list, rootValue) {
      const arr = []
      list.forEach(item => {
        if (item.pid === rootValue) {
        // 找到了匹配的节点
        // 当前节点的id 和 当前节点的子节点的pid是想等的
          const children = this.totree(list, item.id) // 找到的节点的子节点
          item.children = children // 将子节点赋值给当前节点
          arr.push(item)
        }
      })
      console.log(arr)

      return arr
    }

  }
}
</script>

<style scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 80px;
  display: inline-block;
  margin: 10px;
}
</style>

